<template >
<view class="container">
  <div class="box">
    <navigator  hover-class="none" :url="'/pages/merchants/merchants?storeId=' + OnWeekFirstId ">
    <div class="left">
      
      <img :src="OnWeekFirst" alt="">
     
      
    </div>
     </navigator>
    <div class="right">
      <ul>
        <li @click='tostoreId(val.storeId)' v-for="(val,index) in OnWeek" :key='index'>
         
            <img :src="val.brandLogo" alt="">
         
        </li>
      </ul>
    </div>
  </div>
  <swiper class="banner" indicatorDots="true" autoplay="true" interval="2200" duration="1000" circular indicatorActiveColor='#FD6D1F'>
    <swiper-item v-for="item of  bannerList" :key="item.id">
      
        <img @click="toBanner(item)" :src="item.advertImg"/>
     
      
      
    </swiper-item>
  </swiper>
  <div class="today">
    <navigator  hover-class="none" :url="'/pages/ucenter/manufacturerList?title=今日我大牌&dp='+type ">
    <div class="title">
       <span>今日我大牌<em></em></span> 
       <span>更多<img  style="width:6px;height:11px;margin-right:12px;margin-left:8px;" class="goRight" src="/static/images/go.png"/></span>
      </div>
    </navigator>
       <scroll-view  scroll-x    class="list"  >
              
                  <div class="li" v-for='(list,listindex) in Today' :key='listindex'>
                     <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + list.productId+'&img='+ list.brandLogo">
                    <div>
                        <img  :src="list.brandLogo" alt="">
                        <p>{{list.brandName}}</p>
                    </div>
                     </navigator>
                  </div>
              
            </scroll-view>
  </div>
  <div class="select">
    <div class="title">
    <span>今日我最爆炸<em></em></span>  

      </div>
   <ul>
                         <li    v-for="(item,index) in items" :key="index"> 
                             <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                            <div   class='pic'>
                                                <img style="width:44vw;height:44vw" :src="item.productThumb" alt="">
                                            </div>
                                    <div class='bottom'>
                                        <p style="text-indent: 0;"  >{{item.productName }}</p>
                                        <p class='MBprice'> <span>￥{{item.price}} </span> <span>{{item.orderCount}}人已付款</span> </p>
                                            
                                </div>
                             </navigator>
                            </li>
              
                    </ul>
       </div>             
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'

export default {
  data () {
    return {
      typeId: 0,
      collectList: [],
      items:[],
      page:1,
      loadingBt:false,
      nothing:false,
      vtitle:'',
      bannerList:[],
      OnWeek:[],
      OnWeekFirst:'',
      Today:[],
      type:2,
      OnWeekFirstId:'',
   
    }
  },
  onShow(){
    this.vtitle= this.$route.query.title ;
     
      wx.setNavigationBarTitle({
            title: this.vtitle,
          }) 
     this.home();
          this.BestOnWeek();
         this.DayDayProduct()
        
  },
  created(){
           this.BestToday();
           this.BestOnWeekFirst();
 },
  onUnload(){
    this.items=[]
  },
   onReachBottom(){
        
    if(this.loadingBt){
       this.DayDayProduct()
    }
  
  },
  methods: {

  async home(){
  
    let data=JSON.stringify({  "type":312})
      let   res = await api.BestBanner({"data":data});
              this.bannerList=res.data
              
  },
  async BestOnWeek(){
   
    let data=JSON.stringify({"type":this.type})
      let   res = await api.BestOnWeek({"data":data});
              this.OnWeek=res.data
               
  },
  async BestOnWeekFirst(){ // 大图
  

    let data=JSON.stringify({"type":this.type})
      let   res = await api.BestOnWeekFirst({"data":data});
              this.OnWeekFirst=res.data[0].brandLogo
              this.OnWeekFirstId=res.data[0].storeId
               console.log(this.OnWeekFirst)
  },
  async BestToday(){ //今日大牌
  
    let data=JSON.stringify({"type":this.type})
      let   res = await api.BestToday({"data":data});
              this.Today=res.data
                
  },
  tostoreId(id){
       wx.navigateTo({
              url: '/pages/merchants/merchants?storeId=' + id
            });
  },
          
  async  DayDayProduct(){
  
             let data=JSON.stringify({"type":this.type,"pageIndex":"1","pageSize":"10"})
            let    res = await api.getProductTodaye({"data":data});
           this.items = this.items.concat(res.data);
   

                   if (res.data.length == 10) {
                        this.page++;
                        this.loadingBt=true;
                    }else{
                        this.loadingBt=false;
                    }
              

    },
        toBanner(item){
        console.log(item.linkUrl.slice(0,7))
        if(item.linkUrl.slice(0,7)=='StoreId'){
                 wx.navigateTo({
              url: '/pages/merchants/merchants?storeId=' + item.linkUrl.split('=')[1]
            });
        }
        // StoreId
        // wx.navigateTo({
        //   url: '/shopping/checkout?id=' + 5556
        // });
  },
 
 
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/ucenter/collect'
    }
  }
}
</script>

<style lang='scss' scoped>
page{
    background: #f4f4f4;
    min-height: 100%;
}
.list{
  
  display: flex;
  white-space: nowrap;
  height: 134px;;
  padding-left: 15px;
  margin-top: 8px;
  width: 360px;
      .li{
        display: inline-block;
        background: #fff;
        margin-right: 13px;
        img{
          height: 100px;
          width:100px;;
        }
      }
      p{
        text-align: center;
        font-size: 14px;
        color: #333333;
        height: 30px;;
      }
   
}
.container{
    background: #f4f4f4;
    min-height: 100%;
    background: #f7f7f7;
}
 .banner {
  width: 100vw;
  height:43vw;
  img{
    width: 100%;;
    height:43vw;
  }
}
.box{
  height: 152px;
  width: 100vw;
  background: #f7f7f7;
  .left{
    height: 152px;;
    width: 141px;;
    float: left;
    img{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .right{
    height: 1234px;;
    width: 62.4vw;
    float: left;
    li{
      width: 77px;
      height: 50px;
      float: right;
      border-left: 1px solid #f7f7f7;
      border-bottom: 1px solid #f7f7f7;

      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    
  }
}
  .title{
            position: relative;
           height: 40px;
           padding-top: 15px;
           background: #fff;
           margin-top: 15px;
            span:nth-child(1){
              line-height: 14px;
             
              margin: 0 auto;
              display: block;
              position: relative;
              font-size: #333333;
              font-size: 15px;
              text-align: center;
              em{
                position: absolute;
                height: 1px;;
                background: rgba(51,51,51,0.6);
                left: 0;
                right: 0;
                width: 30px;;
                margin: auto;
                bottom:-10px;
              }
        }
          span:nth-child(2){
            position: absolute;
            right: 18px;
            font-size: 13px;
            color: #333;
            top:0;
            line-height: 55px;
        }
    }
.select{

  
 
 ul {
 
  font-size: 0;
  li {
    width: 44vw;
    margin-left: 4vw;
    margin-top:4vw;
    display: inline-block;
    background-color: #fff;
    // background:rgba(255,209,232,1);
box-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.11);
    .bottom {
      width: 90%;
      margin: 0 auto;

    
    .pic {
      width: 48vw;
      height: 48vw;
    }
        p:nth-child(1) {
        color: #000;
        font-size: 12px;
        line-height: 14px;
          overflow: hidden;
          height: 28px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
            margin-bottom: 6px;
            margin-top:8px;
        }

  }     
  .MBprice{
      padding-bottom: 9px;
    
      span:nth-child(1){
          color: #FD6D1F;
          font-size: 14px;

      }
       span:nth-child(2){
          color: #333333;
          font-size: 12px;
         float:right;
      }
  }
  
  }
}
}
</style>
